<template>
  <Pad>
    <ValidationObserver
      ref="observer"
      v-slot="{ passes, invalid }"
      tag="form"
      @submit.prevent="submit()"
    >
      <van-cell-group class="links">
        <van-cell title="浆站名称" value="广西双林单采血浆中心" />
        <van-cell title="预约人" value="李天佑" />
        <van-cell title="联系方式" value="13124565423" />
        <van-cell title="上次献浆时间" value="2019.06.26" />
        <van-cell title="预约日期" value="请选择" is-link />
      </van-cell-group>
      <div class="btn-wrapper">
        <van-button type="primary" block :disabled="invalid" round color="#4482FF">提交</van-button>
      </div>
    </ValidationObserver>
  </Pad>
</template>

<script>
import Pad from "@/components/pad";
import { ValidationObserver, ValidationProvider, extend } from "vee-validate";
import { required } from "vee-validate/dist/rules";
import { queryAppoint, makeAppoint } from '@/api/user';
import zh from "vee-validate/dist/locale/zh_CN";
extend("secret", {
  validate: value => value === "example",
  message: "This is not the magic word"
});
extend("required", {
  ...required,
  message: zh.messages["required"]
});

export default {
  data() {
    return {
      name: "",
      sex: "",
      showSexPicker: false,
      sexColumns: [{ label: "男", value: 0 }, { label: "女", value: 1 }],
      idCard: "",
      address: "",
      showAddressPicker: false,
      addressColumns: [{ label: "男", value: 0 }, { label: "女", value: 1 }],
      // 验证码
      code: "",
      message: ""
    };
  },
  components: {
    Pad,
    ValidationObserver,
    ValidationProvider
  },
  created() {
    queryAppoint().then(res => {
      console.log(res)
    })
  },
  methods: {
    onConfirmSex(obj) {
      this.sex = obj.label;
      this.showSexPicker = false;
    },
    onConfirmAddress(obj) {
      this.address = obj.label;
      this.showAddressPicker = false;
    }
  }
};
</script>

<style lang='scss'>
.links {
  border-radius: 0.213333rem /* 16/75 */;
  overflow: hidden;
}

.btn-wrapper {
  margin-top: 1.066667rem /* 80/75 */;
  padding: 0 1.6rem /* 120/75 */;
}
</style>
